<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<style>
    form {
        background-color: skyblue;
        width: 400px;
        height: 600px;
        margin: 0 auto;
    }
    
    input {
        margin: 10px 0;
    }
    
    #input1 {
        width: 300px;
    }
</style>

<body>
    <form action="">

        <p>用户名：<input type="text" id="input1" placeholder="用户名不能使用特殊字符，长度在6-20之间" /></p>
        <p>昵称： <input type="text" id="input2" /></p>
        <p> 电子邮件： <input type="text" id="input3" /></p>
        <p>身份证： <input type="text" id="input4" /></p>
        <p>手机号码： <input type="text" id="input5" /></p>
        <p>出生日期： <input type="text" id="input6" /></p>
        <p>密码： <input type="password" id="input7" /></p>
        <p>确认密码； <input type="password" id="input8" /></p>
        <p> <input type="radio" id="input9" />10天内免登入</p>
        <p><button id="btn1">确定</button> <button id="btn2">清空</button></p>
        <!-- // - 【1】验证账号 // - 用户名不能为空 // - 不能使用特殊字符（只能使用数字、字母、下划线、横杠） // - 必须以字母开头 // - 长度6-20 // - 【2】昵称只能输入3-6个中文  /[\u4e00-\u9fa5]{3,6}/ // - 【3】电子邮件 // + 163邮箱： // + 英文开头,@前面的内容可以包含数字字母下划线、-(可以多位) // + @后面的域名只能是163 // + 域名后缀（.com .cn .net）可以有多个。 // 【4】身份证 18位数
        后面以为可能是 X x // - 【5】手机号码 // - 11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字就可以了 // - 【6】生日验证 // + 1999/05/08 // + 1999-05-08 // + 19990508 // - 【7】密码 // + 长度小于20 // + 不能包含空格 密码不一致能不能提交 -->
    </form>

    <script>
        // 用户名
        var reg1 = /^[a-zA-Z][0-9a-zA-Z_-]{6,20}$/
        var str1 = 'Q1ds1i-_'
            // console.log(regr1.test(str1));

        // 昵称
        // 3-6个中文
        var reg2 = /[\u4e00-\u9fa5]{3,6}/
        var str2 = '你好呀'
            // console.log(reg2.test(str2));
            // 电子邮件
        var reg3 = /^[a-zA-Z][a-zA-Z0-9_-]{5,12}@163\.(com|cn|net)$/
        var str3 = 'q35h35-w@163.com'
            // console.log(reg3.test(str3));
            // 身份证
        var reg4 = /^3[0-9]{16}[xX0-9]$/
        var str4 = '36034385345664627X'
            // console.log(reg4.test(str4));
            // 手机号码
        var reg5 = /^1[345678]\d{9}$/
        var str5 = '13456788687'
            // console.log(reg5.test(str5));
            // 出生日期验证
            // 月份：01-12
            //         0 1-9   0[1-9]
            //         1 0-2   1[0-2]
            //     日期 01-31
            //     0[1-9]
            //     [1-2]\d
            //     3[0-1]

        //  */
        var reg6 = /^\d{4}(-|\/)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/
        var str6 = '1999/04/06';
        // console.log(reg6.test(str6));
        // 密码
        var reg7 = /^[A-Za-z0-9\./?@!#$,]{6,20}$/
        var str7 = '34uedsr,.?@!#teursd'
            // console.log(reg7.test(str7));
            // 确认密码
            // input7.value == input8.value
            // 获取元素
        var input1 = document.querySelector('#input1')
        var input2 = document.querySelector('#input2')
        var input3 = document.querySelector('#input3')
        var input4 = document.querySelector('#input4')
        var input5 = document.querySelector('#input5')
        var input6 = document.querySelector('#input6')
        var input7 = document.querySelector('#input7')
        var input8 = document.querySelector('#input8')
        var btn1 = document.querySelector('#btn1')
        var btn2 = document.querySelector('#btn2')

        btn1.onclick = function() {

            if (reg1.test(input1.value)) {
                alert('输入正确')
            } else {
                alert('请输入正确的用户名')
            }

            if (reg2.test(input2.value)) {
                alert('输入正确')
            } else {
                alert('请输入正确的昵称')
            }

            if (reg3.test(input3.value)) {
                alert('输入正确')
            } else {
                alert('请输入正确的邮箱')
            }

            if (reg4.test(input4.value)) {
                alert('输入正确')
            } else {
                alert('请输入正确的身份证')
            }

            if (reg5.test(input5.value)) {
                alert('输入正确')
            } else {
                alert('请输入正确的手机号')
            }

            if (reg6.test(input6.value)) {
                alert('输入正确')
            } else {
                alert('请输入正确的出生日期')
            }

            if (reg7.test(input7.value)) {
                alert('输入正确')
            } else {
                alert('请输入正确的密码')
            }
            if (input8.value == input7.value) {
                alert('输入正确')
            } else {
                alert('请输入的密码不一致')
            }





        }
    </script>
</body>

</html>